HTML CSS

利用HTML和CSS实现简单的淘宝购物车前端

Posted by Futari on 2021-10-30
Estimated Reading Time 15 Minutes
Words 2.9k In Total
Viewed Times

利用HTML和CSS实现简单的淘宝购物车前端

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<link lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
<link type="text/css" rel="stylesheet" href="购物车.css"/>
</head>
<body>
    <script>
        function modifyCount(thisNode){
            //输入的数据只能是1-64，不然超出则归一
            var userInput = thisNode.value;
            //对象调用它的属性value
            var regExp = /^[1-9][0-9]?$/
            var ok = regExp.test(userInput)//.test测试是否符合正则表达式，返回boollean
            if(!ok) {//不合法
                thisNode.value = 1;
            }else {
                if (thisNode.value > 64){
                    thisNode.value = 1;
                }
            //修改商品数量时，商品价格应该也改变，在函数一同实现
            }
            var price = document.getElementById("price").value
            //alert(parseInt(price2.innerHTML))//parseInt是把字符解析成数字
            //获取隐藏hidden域的单价
            var total =price * thisNode.value
            var item_total_price = document.getElementById("item_total_price")
            item_total_price.innerHTML = "￥"+total;
            //注意：这里必须要用innerHTML而不是用value，innerHTML返回表格行的开始和结束标签之间的 HTML（返回内嵌内容）。
            //而value是专属于input标签的属性
                // value和innerHTML都可以用来获取和修改元素的值（或内容）；不同之处如下：
                // 1）value可以用来修改（获取）textarea和input的value属性的值或元素的内容；
                // 2）innerHTML用来修改（获取）HTML元素（如div）html格式的内容。
        }
        function del(thisNode) {
            //删除之前提示一下
            var ok = (window.confirm("确定是否要删除?"))
                if (ok){
                    //删除作为基本方法：js元素有其指定的方法remove（）
                    thisNode.parentNode.parentNode.remove()//删除父节点的父节点（也就是条目），parentNode也是元素属性
                }
            //结果返回一个boollean
            // var del = document.getElementById("del");
        }
        function addProduct() {
            //添加商品
            var product_num = document.getElementById("product_num");
            var num = parseInt(product_num.value)+1;
            // alert(num.value)
            product_num.value = num;
            modifyCount(product_num)//函数复用很重要

        }
    </script>
    <div class="shops">总体盒子
        <div class="shop">
            <!--第一个店铺-->
            <div class="shopheader">
                <input type="checkbox" class="shop_checkbox"/>
                <span class="shop_icon"></span>
                <span class="shop_name">店铺：官方旗舰店</span>
                <span class="shop_wangwang_icon"></span>
            </div>
            <div class="item">
                <!--条目一-->
                <div class="item_checkbox">
                    <input type="checkbox"/><!--条目复选框-->
                </div>
                <div class="item_img">
                    <!--条目图片-->
                    <img width="120px" src="u=79603525,2490481877&fm=26&fmt=auto.webp">
                </div>
                <div class="promotion">
                    <!--宣传广告语-->
                    <div class="promotion_content">
                        很漂亮的衣服内搭显瘦
                    </div>
                    <div class="three_icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                    <!--小图标-->
                <div class="sku">
                    <!--商品参数-->
                    <div class="sku_color">
<!--颜色-->               颜色分类：黑色
                    </div>
                    <div class="sku_size">
<!--尺寸-->               尺码：xxl
                    </div>
                </div>
                <div class="price">
                    <!--价格参数-->
                    <div class="price1">
                        <!--原价-->
                        <del id="del" class="del" onclick="del(this)">￥110.0</del>
                    </div>
                    <div id="price2" class="price2">
<!--现价-->               ￥59.90
                    </div>
                    <input type="hidden" id="price" value="59.90"/>
                </div>
                <div class="number">
                    <!--商品数量-->
                    <span class="num_minux">-</span>
                    <!--this代表的是当前的文本框对象-->
                    <input id="product_num" onkeyup="modifyCount(this)" class="product_num" type="text" value="1"/>
                    <span onclick="addProduct()" class="num_plus">+</span>
                </div>
                <div id="item_total_price" class="item_total_price">
                    59.90元
                    <!--条目总价-->
                </div>
                <div class="operation">
                    <div class="favorites">移入收藏夹</div>
                    <div class="delete">删除</div>
                </div>
            </div>
            <!--下面是条目二-->
            <div class="item">
                <!--条目一-->
                <div class="item_checkbox">
                    <input type="checkbox"/><!--条目复选框-->
                </div>
                <div class="item_img">
                    <!--条目图片-->
                    <img width="120px" src="src=http___nimg.ws.126.net__url=http___dingyue.ws.126.net_2021_0410_914ffef9j00qrcje4005td200tk00vcg007x008e.jpg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg.ws.126.jpg">
                </div>
                <div class="promotion">
                    <!--宣传广告语-->
                    <div class="promotion_content">
                        这是第二个非常精美的商品
                    </div>
                    <div class="three_icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!--小图标-->
                <div class="sku">
                    <!--商品参数-->
                    <div class="sku_color">
                        <!--颜色-->               颜色分类：黑色
                    </div>
                    <div class="sku_size">
                        <!--尺寸-->               尺码：xxl
                    </div>
                </div>
                <div class="price">
                    <!--价格参数-->
                    <div class="price1">
                        <!--原价-->
                        <del>￥110</del>
                    </div>
                    <div class="price2">
                        <!--现价-->               ￥50
                    </div>
                </div>
                <div class="number">
                    <!--商品数量-->
                    <span class="num_minux">-</span>
                    <input class="product_num" type="text" value="1"/>
                    <span class="num_plus">+</span>
                </div>
                <div id="item_total_price2" class="item_total_price">
                    59.90元
                    <!--这里是总价-->
                </div>
                <div class="operation">
                    <div class="favorites">移入收藏夹</div>
                    <div class="delete">删除</div>
                </div>
            </div>

        </div>
        <div class="shop">
            <!--第一个店铺-->
            <div class="shopheader">
                <input type="checkbox" class="shop_checkbox"/>
                <span class="shop_icon"></span>
                <span class="shop_name">店铺：第二个官方旗舰店</span>
                <span class="shop_wangwang_icon"></span>
            </div>
            <div class="item">
                <!--条目一-->
                <div class="item_checkbox">
                    <input type="checkbox"/><!--条目复选框-->
                </div>
                <div class="item_img">
                    <!--条目图片-->
                    <img width="120px" src="u=79603525,2490481877&fm=26&fmt=auto.webp">
                </div>
                <div class="promotion">
                    <!--宣传广告语-->
                    <div class="promotion_content">
                        很漂亮的衣服内搭显瘦
                    </div>
                    <div class="three_icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!--小图标-->
                <div class="sku">
                    <!--商品参数-->
                    <div class="sku_color">
                        <!--颜色-->               颜色分类：黑色
                    </div>
                    <div class="sku_size">
                        <!--尺寸-->               尺码：xxl
                    </div>
                </div>
                <div class="price">
                    <!--价格参数-->
                    <div class="price1">
                        <!--原价-->
                        <del>￥110.0</del>
                    </div>
                    <div class="price2">
                        <!--现价-->               ￥50.0
                    </div>
                </div>
                <div class="number">
                    <!--商品数量-->
                    <span class="num_minux">-</span>
                    <input class="product_num" type="text" value="1"/>
                    <span class="num_plus">+</span>
                </div>
                <div class="item_total_price">
                    59.90元
                </div>
                <div class="operation">
                    <div class="favorites">移入收藏夹</div>
                    <div class="delete">删除</div>
                </div>
            </div>
            <!--下面是条目二-->
            <div class="item">
                <!--条目一-->
                <div class="item_checkbox">
                    <input type="checkbox"/><!--条目复选框-->
                </div>
                <div class="item_img">
                    <!--条目图片-->
                    <img width="120px" src="src=http___nimg.ws.126.net__url=http___dingyue.ws.126.net_2021_0410_914ffef9j00qrcje4005td200tk00vcg007x008e.jpg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg.ws.126.jpg">
                </div>
                <div class="promotion">
                    <!--宣传广告语-->
                    <div class="promotion_content">
                        这是第二个非常精美的商品
                    </div>
                    <div class="three_icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!--小图标-->
                <div class="sku">
                    <!--商品参数-->
                    <div class="sku_color">
                        <!--颜色-->               颜色分类：黑色
                    </div>
                    <div class="sku_size">
                        <!--尺寸-->               尺码：xxl
                    </div>
                </div>
                <div class="price">
                    <!--价格参数-->
                    <div class="price1">
                        <!--原价-->
                        <del>￥110</del>
                    </div>
                    <div class="price2">
                        <!--现价-->               ￥50
                    </div>
                </div>
                <div class="number">
                    <!--商品数量-->
                    <span class="num_minux">-</span>
                    <input class="product_num" type="text" value="1"/>
                    <span class="num_plus">+</span>
                </div>
                <div class="item_total_price">
                    59.90元
                </div>
                <div class="operation">
                    <div class="favorites">移入收藏夹</div>
                    <div class="delete">删除</div>
                </div>
            </div>

        </div>
        <div class="checkout">
            <!--全选-->
            <div class="check_all_div">
                <span class="checkall">
                    <input type="checkbox"/>&nbsp;&nbsp;全选
                </span>
                <span class="delchecked">
                    删除
                </span>
            </div>
            <div class="checkout2">
                <!--结算,单选框直接命名为checkout就能识别，因为一般对其进行操作都是统一的-->
                已选商品<span class="checked_count">0</span>件
                <span class="total_text">合计（不计运费）：</span>
                <span class="total_price">0.00</span>
                <span class="checkout_btn">结算</span>
            </div>


        </div>
    </div>
</body>
</html>

CSS文件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*类选择器.
选择器的效果可以叠加使用
#是id选择器，没有前缀则是普通标签选择器*/
.shop_icon,.shop_wangwang_iconm,.three_icon span{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: crimson;
/*上面首先设置图标，下面设置所有店铺的样式*/

}
.shops{
    width: 1100px;
    background-color: #DAD9D9;
    /*设置div居中*/
    margin-left: auto;
    margin-right: auto;
    /*字体大小*/
    font-size: 13px;
    color: blue;
}
/*设置店铺名称和图标对齐*/
.shop_name{
    position: relative;
    bottom: 2px;
}
/*打补丁调整位置,补丁相当于透明填充材料*/
.shop_name,.shop_icon,.shop_checkbox,.shop_wangwang_icon {
    margin-right: 10px;
    /*margin是声明设置指定的元素（div等等）外边距属性
    padding对应内边距，padding会影响div的宽度*/

}
/*设置条目样式
div是自动独占一行的，是块级元素
而span不是独占一行的，是行内元素*/

/*设置条目的样式*/
.item{
    display:flex;
    /*展示：flex采用弹性布局*/
    border: 1px solid #DAD9D9;
/*soild代表实线，指定完边框宽度之后指定线的类型和颜色*/
    padding:20px;
    margin-top: 15px;
    background-color: bisque;
}
.item_img{
    /*width:100px;*/
    /*height: 100px;*/
}
.shopheader{
    margin-bottom: 5px;
    margin-top: 5px;
}
.item_checkbox{
    margin-right: 20px;
    /*-right说明打右补丁*/
    margin-left: 10px;
}
.promotion{
    margin-right: 20px;
    margin-left: 20px;
    padding: 10px;
    /*background: crimson;*/
    display: flex;
    flex-direction: column;
    /*调整弹性布局的方向：纵向（列）布局*/
    justify-content: space-between;
    /*调整内容-（盒子）两端对齐*/

}
.sku{
    margin-right: 50px;

}
.price{
    margin-right: 20px;
}
.product_num {
    width: 20px;
    text-align: center;
}
.item_total_price {
    margin-left: 30px;
    margin-right: 35px;
    font-size: 17px;
    /*size代表字号大小*/
    font-weight: 600;
    /*weight代表字体的粗细*/
    color: crimson;
    /*color代表字体颜色*/

}
.number {
    background-color: burlywood;
    /*这里文本框的颜色为什么没有随之改变*/
    height: 20px;
    margin-left: 30px;
    margin-right:30px;
}
.price del {
    color: dimgrey;

}
.checkout {
    display: flex;
    justify-content: space-between;
    background-color: #DAD8D8;
    height: 40px;
    margin-top: 15px;
}
.checked_count,.total_text {
    font-size: 15px;
    font-weight: 600;
    color: #F31919;
}
.checkout_btn {
    width:100px;
    color: white;
    height: 55px;
    background-color: #F31919;
    display: inline-block;
    position: relative;
    top: 5px;
    font-weight: 800;
    font-size: 20px;
    line-height: 60px;
    /*设置行间距*/
    text-align: center;
}
.checkout2 {
    position:relative;
    bottom: 20px;
}

效果图：

效果图

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。 也欢迎您共享此博客，以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。 谢谢 ！

特色标签
HTML CSS
链友
ESC